import React from 'react'
import './Login.scss'
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Card, Row, Col } from 'antd';
import { useStor } from '../../store/index'
import { useNavigate } from "react-router-dom";
function login() {
    const { userStroe } = useStor()
    const navigate = useNavigate()
    const onFinish = (val) => {
        userStroe.login({
            username: val.username,
            password: val.password
        }).then(res => {
            navigate('/')
        })
    }
    return (
        <div className="Login">
            <Row className="loginrow" align="middle" >
                <Col span={8}>
                    <Card title="后台管理系统登录" bordered={false} style={{ width: 300 }}>
                        <Form name="normal_login" className="login-form" initialValues={{
                            username: "admin",
                            password: "123456"

                        }} onFinish={onFinish} >
                            <Form.Item name="username" rules={[
                                {
                                    required: true,
                                    message: "请输入用户名"
                                }
                            ]}>
                                <Input placeholder="输入用户名" prefix={<UserOutlined />} />
                            </Form.Item>
                            <Form.Item name="password" rules={[
                                {
                                    required: true,
                                    message: "请输入密码"
                                }
                            ]}>
                                <Input placeholder="输入密码" type='password' prefix={<LockOutlined />} />
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" htmlType="submit" className="loginbutton">登录</Button>
                            </Form.Item>
                        </Form>
                    </Card>
                </Col>
            </Row>
        </div>
    )
}


export default login